<template>
  <view class="question-bank-detail">
    <!-- 状态栏 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }">
      <text class="time">{{ currentTime }}</text>
      <view class="status-icons">
        <text class="fa fa-signal"></text>
        <text class="fa fa-wifi"></text>
        <text class="fa fa-battery-full"></text>
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">题库详情</text>
      <view class="nav-right" @tap="goToMistakes">
        <text class="fa fa-bookmark" style="color: rgb(107 114 128)"></text>
      </view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="page-content">
      <!-- 题库头部 -->
      <view class="section">
        <view class="bank-header">
          <view class="header-content">
            <view class="icon-box red">
              <text
                class="fa fa-heartbeat fa-2x"
                style="color: rgb(220 38 38)"
              ></text>
            </view>
            <view class="header-info">
              <text class="bank-title">心肺复苏术题库</text>
              <text class="bank-category">分类：急救医学</text>
              <text class="bank-time">开始：2025.01.15 08:00</text>
              <text class="bank-time">结束：2025.12.31 23:59</text>
              <view class="progress-bar">
                <view class="progress-track">
                  <view
                    class="progress-fill"
                    :style="{ width: progress + '%' }"
                  ></view>
                </view>
                <text class="progress-text">{{ progress }}%</text>
              </view>
            </view>
            <view class="header-status">
              <text class="status-tag green">进行中</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 快速操作 -->
      <view class="section">
        <view class="action-card">
          <button class="continue-button" @tap="continuePractice">
            <text class="fa fa-play"></text>
            <text class="button-text">继续练习</text>
          </button>
        </view>
      </view>

      <!-- 练习统计 -->
      <view class="section">
        <view class="stats-card">
          <view class="stats-header">
            <text class="stats-title">练习统计</text>
            <text class="stats-total">总计150题</text>
          </view>
          <view class="stats-grid">
            <view class="stat-item green">
              <text class="stat-label">已练习</text>
              <text class="stat-value">45</text>
            </view>
            <view class="stat-item blue">
              <text class="stat-label">正确率</text>
              <text class="stat-value">87%</text>
            </view>
            <view class="stat-item yellow">
              <text class="stat-label">错题</text>
              <text class="stat-value">6</text>
            </view>
            <view class="stat-item purple">
              <text class="stat-label">收藏</text>
              <text class="stat-value">12</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 练习模式 -->
      <view class="section">
        <view class="modes-card">
          <view class="modes-header">
            <text class="modes-title">练习模式</text>
          </view>
          <view class="modes-grid">
            <!-- 顺序练习 -->
            <view class="mode-item blue" @tap="startMode('sequential')">
              <view class="mode-header">
                <text class="fa fa-list-ol fa-blue"></text>
                <text class="mode-title">顺序练习</text>
              </view>
              <text class="mode-desc">按章节顺序练习</text>
              <text class="mode-action blue">开始练习</text>
            </view>

            <!-- 随机练习 -->
            <view class="mode-item green" @tap="startMode('random')">
              <view class="mode-header">
                <text class="fa fa-random fa-green"></text>
                <text class="mode-title">随机练习</text>
              </view>
              <text class="mode-desc">随机抽取题目</text>
              <text class="mode-action green">开始练习</text>
            </view>

            <!-- 错题练习 -->
            <view class="mode-item red" @tap="startMode('mistakes')">
              <view class="mode-header">
                <text class="fa fa-exclamation-triangle fa-red"></text>
                <text class="mode-title">错题练习</text>
              </view>
              <text class="mode-desc">专项错题巩固</text>
              <text class="mode-action red">6道错题</text>
            </view>

            <!-- 收藏练习 -->
            <view class="mode-item purple" @tap="startMode('favorites')">
              <view class="mode-header">
                <text class="fa fa-star fa-purple"></text>
                <text class="mode-title">收藏练习</text>
              </view>
              <text class="mode-desc">重点题目练习</text>
              <text class="mode-action purple">12道收藏</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      currentTime: "09:41",
      progress: 30,
    };
  },
  onLoad() {
    this.initStatusBar();
    this.updateTime();
  },
  methods: {
    initStatusBar() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 20;
    },
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}`;
    },
    goBack() {
      uni.navigateBack();
    },
    goToMistakes() {
      uni.navigateTo({
        url: "/pages/mistakes",
      });
    },
    continuePractice() {
      uni.showToast({
        title: "继续练习",
        icon: "none",
      });
    },
    startMode(mode) {
      uni.showToast({
        title: `开始${mode}练习`,
        icon: "none",
      });
    },
    navigateToHome() {
      uni.switchTab({
        url: "/pages/home",
      });
    },
    navigateToProfile() {
      uni.switchTab({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.question-bank-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 100%);
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  font-size: 24rpx;
  color: #9ca3af;
  background-color: #ffffff;
}

.status-icons {
  display: flex;
  gap: 16rpx;
}

.icon {
  font-size: 24rpx;
}

.nav-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f3f4f6;
}

.nav-back {
  position: absolute;
  left: 32rpx;
  padding: 8rpx;
}

.back-icon {
  font-size: 36rpx;
  color: #6b7280;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.nav-right {
  position: absolute;
  right: 32rpx;
  padding: 8rpx;
}

.right-icon {
  font-size: 36rpx;
  color: #6b7280;
}

.page-content {
  height: calc(100vh - 88rpx - 120rpx);
}

.section {
  padding: 0 32rpx;
  margin-top: 24rpx;
}

.bank-header {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.header-content {
  display: flex;
  gap: 24rpx;
}

.icon-box {
  width: 128rpx;
  height: 128rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-box.red {
  background-color: #fecaca;
}

.icon-box .icon {
  font-size: 48rpx;
}

.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.bank-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.bank-category {
  font-size: 24rpx;
  color: #6b7280;
}

.bank-time {
  font-size: 24rpx;
  color: #9ca3af;
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-top: 8rpx;
}

.progress-track {
  flex: 1;
  height: 16rpx;
  background-color: #e5e7eb;
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444 0%, #ec4899 100%);
  border-radius: 999rpx;
  transition: width 0.3s;
}

.progress-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #6b7280;
}

.header-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status-tag {
  font-size: 22rpx;
  padding: 8rpx 16rpx;
  border-radius: 999rpx;
  font-weight: 500;
}

.status-tag.green {
  background-color: #d1fae5;
  color: #047857;
}

.action-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.continue-button {
  width: 100%;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-radius: 24rpx;
  padding: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  font-weight: 500;
  border: none;
  font-size: 28rpx;
}

.button-icon {
  font-size: 32rpx;
}

.button-text {
  font-size: 28rpx;
  color: #ffffff;
}

.stats-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.stats-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.stats-total {
  font-size: 24rpx;
  color: #6b7280;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24rpx;
}

.stat-item {
  border-radius: 16rpx;
  padding: 16rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.stat-item.green {
  background-color: #d1fae5;
}

.stat-item.blue {
  background-color: #dbeafe;
}

.stat-item.yellow {
  background-color: #fef3c7;
}

.stat-item.purple {
  background-color: #f3e8ff;
}

.stat-label {
  font-size: 22rpx;
  font-weight: 500;
  color: #111827;
}

.stat-value {
  font-size: 36rpx;
  font-weight: 700;
}

.stat-item.green .stat-value {
  color: #10b981;
}

.stat-item.blue .stat-value {
  color: #2563eb;
}

.stat-item.yellow .stat-value {
  color: #f59e0b;
}

.stat-item.purple .stat-value {
  color: #9333ea;
}

.modes-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f3f4f6;
}

.modes-header {
  margin-bottom: 24rpx;
}

.modes-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #111827;
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.mode-item {
  border-radius: 24rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.mode-item.blue {
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
  border: 1rpx solid #93c5fd;
}

.mode-item.green {
  background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
  border: 1rpx solid #86efac;
}

.mode-item.red {
  background: linear-gradient(135deg, #fef2f2 0%, #ffe4e6 100%);
  border: 1rpx solid #fca5a5;
}

.mode-item.purple {
  background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 100%);
  border: 1rpx solid #c4b5fd;
}

.mode-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.mode-icon {
  font-size: 32rpx;
}

.mode-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.mode-desc {
  font-size: 24rpx;
  color: #6b7280;
}

.mode-action {
  font-size: 24rpx;
  font-weight: 500;
}

.mode-action.blue {
  color: #2563eb;
}

.mode-action.green {
  color: #10b981;
}

.mode-action.red {
  color: #ef4444;
}

.mode-action.purple {
  color: #9333ea;
}

.bottom-space {
  height: 32rpx;
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 16rpx 0;
}

.tab-icon {
  font-size: 36rpx;
}

.tab-text {
  font-size: 24rpx;
  color: #6b7280;
}

.tab-item.active .tab-text {
  color: #2563eb;
  font-weight: 500;
}
</style>
